import 'package:eh_mobile/common/store/index.dart';
import 'package:eh_mobile/common/style/bny_color.dart';
import 'package:eh_mobile/common/utils/extension.dart';
import 'package:eh_mobile/pages/setup/setup/set_up_manage_controller.dart';
import 'package:eh_mobile/pages/setup/setup/set_up_user/set_up_system_page.dart';
import 'package:eh_mobile/pages/setup/setup/set_up_user/set_up_user_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import '../../../common/store/config_store.dart';
import '../../../common/values/svg_image.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
import '../../frame/login/view.dart';

class SetupManagePage extends StatefulWidget {
  Function? callBack;

  SetupManagePage({this.callBack, super.key});

  @override
  State<SetupManagePage> createState() => _SetupManagePageState();
}

class _SetupManagePageState extends State<SetupManagePage> {
  SetupManageController controller = Get.put(SetupManageController());
  double circleWidth = 60.w;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(top: 12.h, bottom: 15.h,left: 32.w,right: 12.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '设置',
                style: 18.ts,
              ),
              InkWell(
                onTap: (){
                  if(widget.callBack!=null){
                    widget.callBack!();
                  }
                  Get.back();
                },
                child: Container(
                  width: 42.r,
                  height: 32.r,
                  padding: const EdgeInsets.fromLTRB(0, 4, 0, 4).r,
                  decoration: BoxDecoration(
                    color: const Color.fromRGBO(222, 222, 222, 0.1),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: SvgPicture.asset(
                    SVGImage.icCloseSSvg,
                  ),
                ),
              )
            ],
          ),
        ),
        Expanded(
          child: ListView(
            children: [
              addNewServerView(),
              12.sizedBoxHeight,
              areaManageView().onClick((){
                Get.to(const LoginPage());
              }),
              12.sizedBoxHeight,
              dynamicManageView(),
              12.sizedBoxHeight,
              helpManageView()
            ],
          ),
        ),
      ],
    );
  }

  //添加服务器
  Widget addNewServerView() {
    return Container(
      margin: EdgeInsets.only(left: 12.w, right: 12.w),
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Column(children: [
        Padding(
          padding: EdgeInsets.only(top: 18.h, left: 20.w, bottom: 18.h),
          child: Row(
            children: [
              Container(
                width: circleWidth,
                height: circleWidth,
                decoration: BoxDecoration(
                  color: BnyColor.lightWhiteColor,
                  borderRadius: BorderRadius.circular(30.r),
                ),
                child: UnconstrainedBox(
                  child: Container(
                    width: circleWidth - 3.w,
                    height: circleWidth - 3.w,
                    decoration: BoxDecoration(
                      color: const Color.fromRGBO(50, 50, 50, 1.0),
                      borderRadius: BorderRadius.circular(28.r),
                    ),
                  ),
                ),
              ),
              20.sizedBoxWidth,
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Admin',
                    style: TextStyle(color: Colors.white, fontSize: 26.sp),
                  ),
                  2.sizedBoxHeight,
                  Text(
                    '服务器-ZLhome',
                    style: TextStyle(
                        color: const Color.fromRGBO(222, 222, 222, 0.7),
                        fontSize: 18.sp),
                  ),
                ],
              ),
              const Expanded(child: SizedBox()),
              Container(
                width: 22.r,
                height: 22.r,
                margin: EdgeInsets.only(right: 17.w),
                child: SvgPicture.asset(SVGImage.listIcArrowSvg),
              )
            ],
          ),
        ).onClick(() {
          showCupertinoModalBottomSheet(
              context: context, builder: (context) => const SetUpUserPage(),topRadius: Radius.circular(24.r),enableDrag: false);
        }),
        lineGrayView(),
        _buildClickCard(
            'assets/svgs/set_up/set_up_ic_server.svg', '${UserStore().mobileIdentity??''}#${ConfigStore().deviceName}', ''),//'添加新的服务器'
      ]),
    );
  }

  //区域管理
  Widget areaManageView() {
    return Container(
      margin: EdgeInsets.only(left: 12.w, right: 12.w),
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Column(children: [
        _buildClickCard(controller.areaIconList.first,
            controller.areaNameList.first, SVGImage.listIcArrowSvg),
        lineGrayView(),
        _buildClickCard(controller.areaIconList.last,
            controller.areaNameList.last, SVGImage.listIcArrowSvg),
      ]),
    );
  }

//区域管理
  Widget dynamicManageView() {
    return Container(
      margin: EdgeInsets.only(left: 12.w, right: 12.w),
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Column(children: [
        _buildClickCard(controller.dynamicIconList.first,
            controller.dynamicNameList.first, SVGImage.listIcArrowSvg),
        lineGrayView(),
        _buildClickCard(controller.dynamicIconList[1],
            controller.dynamicNameList[1], SVGImage.listIcArrowSvg),
        lineGrayView(),
        _buildClickCard(controller.dynamicIconList.last,
            controller.dynamicNameList.last, SVGImage.listIcArrowSvg),
      ]),
    );
  }

  //帮助
  Widget helpManageView() {
    return Container(
      margin: EdgeInsets.only(left: 12.w, right: 12.w),
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Column(children: [
        _buildClickCard(
            controller.helpIconList.first,
            controller.helpNameList.first,
            'assets/svgs/set_up/set_up_ic_share.svg'),
        lineGrayView(),
        _buildClickCard(controller.helpIconList[1], controller.helpNameList[1],
                SVGImage.listIcArrowSvg)
            .onClick(() {
          showCupertinoModalBottomSheet(
              topRadius: Radius.circular(24.r),
              context: context,
              builder: (context) => const SetUpSystemPage(),
              enableDrag: false);
        }),
        lineGrayView(),
        _buildClickCard(controller.helpIconList.last,
            controller.helpNameList.last, SVGImage.listIcArrowSvg),
      ]),
    );
  }

  // 创建可点击卡片item
  Widget _buildClickCard(
      String leftName, String content, String rightImageName) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(20, 0, 17, 0).r,
      height: 60.r,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SvgPicture.asset(
            leftName,
            colorFilter: const ColorFilter.mode(
                Color.fromRGBO(168, 168, 168, 1.0), BlendMode.srcIn),
          ),
          22.sizedBoxWidth,
          Text(content, style: 18.ts),
          const Expanded(child: SizedBox()),
          rightImageName.isNotEmpty ? 12.sizedBoxWidth : Container(),
          rightImageName.isNotEmpty
              ? SizedBox(
                  width: 22.r,
                  height: 22.r,
                  child: SvgPicture.asset(rightImageName),
                )
              : Container()
        ],
      ),
    );
  }

  Widget lineGrayView() {
    return Container(
      margin: EdgeInsets.only(left: 19.r, right: 19.r),
      height: 1,
      color: const Color.fromRGBO(255, 255, 255, 0.05),
    );
  }
}
